<template>
  <MyDialog
    v-model="isVisible"
    :type="type"
    class="audit-dialog-wrapper"
    width="1200"
    :dialog-title="dialogTitle"
    :need-modal="needModal"
    @closed="closed"
  >
    <my-form
      ref="ruleForm"
      v-model="dataForm"
      label-width="120px"
      :disabled="currentRow.type"
      :model="dataForm"
      :is-grid="false"
      :items-datas="state.itemsDatas"
    >
    </my-form>
    <template #footer>
      <my-button type="reset" title="关闭" @click="closed" />
      <my-button type="save" title="保存" :loading="buttonLoading" @click="submitForm" />
    </template>
  </MyDialog>
</template>

<script setup lang="ts" name="addAb01">
import { ref } from 'vue';
import { addAb01, getAb01, updateAb01 } from '@/api/yuanshidian/ab01';
const { proxy } = getCurrentInstance();
const props = defineProps(
  {
    dialogTitle: {
      type: String,
      default: '弹窗标题'
    },
    needModal: {
      type: Boolean,
      default: true
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {}
    }
  },
  ['modelValue']
);
const buttonLoading = ref(false);
const ruleForm = ref<ElFormInstance>();
const state = reactive({
  dataForm: {
    id: '',
    aaa027: '',
    dw23: '',
    dw65: '',
    dw01: '',
    dw25: '',
    dw66: '',
    dw02: '',
    dw27: '',
    dw67: '',
    dw04: '',
    dw29: '',
    dw68: '',
    dw30: '',
    dw70: '',
    dw08: '',
    dw31: '',
    dw75: '',
    dw09: '',
    dw34: '',
    dw79: '',
    dw10: '',
    dw35: '',
    tz01: '',
    dw12: '',
    dw36: '',
    tzce: '',
    dw13: '',
    dw37: '',
    dh1: '',
    dw14: '',
    dw60: '',
    dh2: '',
    dw17: '',
    dw61: '',
    dh3: '',
    dw19: '',
    dw63: '',
    systime: '',
    dw21: '',
    dw64: '',
    pch: '',
    dw22: ''
  },
  itemsDatas: [
    { label: '手册编号', prop: 'aaa027', type: 'input' },
    { label: '计帐时间', prop: 'dw23', type: 'input' },
    { label: '身份证号', prop: 'dw65', type: 'input' },
    { label: '转移总额', prop: 'dw01', type: 'input' },
    { label: '个人账号', prop: 'dw25', type: 'input' },
    { label: '完成时间', prop: 'dw66', type: 'input' },
    { label: '姓名', prop: 'dw02', type: 'input' },
    { label: '本期个人缴费', prop: 'dw27', type: 'input' },
    { label: '性别', prop: 'dw67', type: 'date' },
    { label: '出生日期', prop: 'dw04', type: 'date' },
    { label: '本期单位划转', prop: 'dw29', type: 'input', min: 0, controls: false },
    { label: '工作时间', prop: 'dw68', type: 'date' },
    { label: '异动时间', prop: 'dw70', type: 'input', min: 0, controls: false },
    { label: '本期单位代缴', prop: 'dw30', type: 'input' },
    { label: '历年个人缴费', prop: 'dw08', type: 'input' },
    { label: '历年单位划转', prop: 'dw31', type: 'input', min: 0, controls: false },
    { label: '转移历年月数', prop: 'dw75', type: 'input', min: 0, controls: false },
    { label: '历年单位代缴', prop: 'dw09', type: 'input' },
    { label: '凭证号码', prop: 'dw34', type: 'input' },
    { label: '转移总月数', prop: 'dw79', type: 'date' },
    { label: '单据号码', prop: 'dw10', type: 'input' },
    { label: '办理时间', prop: 'dw35', type: 'input' }
  ]
});
const { dataForm } = toRefs(state);
const isVisible = ref(false);
watch(
  () => props.modelValue,
  async (v) => {
    isVisible.value = v;
    if (props.currentRow.id) {
      var res = await getAb01(props.currentRow.id);
      Object.keys(dataForm.value).forEach((item) => {
        dataForm.value[item] = res.data[item];
      });
      console.log(dataForm.value);
    }
  },
  { immediate: true, deep: true }
);
const emit = defineEmits(['update:modelValue']);
const closed = () => {
  emit('update:modelValue');
};
/** 表单重置 */
const reset = () => {
  ruleForm.value?.resetFields();
};

/** 提交按钮 */
const submitForm = () => {
  ruleForm.value?.validate(async (valid) => {
    if (valid) {
      buttonLoading.value = true;
      if (dataForm.value.id) {
        await updateAb01(dataForm.value).finally(() => (buttonLoading.value = false));
      } else {
        await addAb01(dataForm.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      reset();
      closed();
    }
  });
};
</script>
